<template>
    <!-- <div class="home-box"> -->
    <ViewScroll class="home-box">
        <div>
            <!-- 首页分类列表 start -->
            <div v-for="(item, index) in types" :key="index">
                <div class="list-name">
                    <span>{{ item.typeName }}</span>
                    <!-- <span class="list-more">更多 ></span> -->
                    <!-- <router-link :to=" `/films?typeId=${item.typeId}&typeName=${ item.typeName }` " tag="span" class="list-more">更多 ></router-link> -->
                    <!-- <router-link tag="span" class="list-more"
                        :to = " {
                            path:'/films',
                            query:{
                                typeId:item.typeId,
                                typeName:item.typeName
                            }
                        } "
                    >更多 ></router-link> -->
                    <router-link tag="span" class="list-more"
                        :to = " {
                            name:'films',
                            query:{
                                typeId:item.typeId,
                                typeName:item.typeName
                            }
                        } "
                    >更多 ></router-link>
                </div>
                <FilmList class="list-content" :list="item.list"></FilmList>
            </div>
            <!-- 首页分类列表 end -->
        </div>
    </ViewScroll>
    <!-- </div> -->
</template>
<script>
import FilmList from "../components/FilmList";

export default {
    components: {
        FilmList
    },
    data() {
        return {
            types: [],
        };
    },
    methods: {
        postTypesData(){
            //    console.log(this.$api)
            this.$api.loadTypes()
                .then(( { resultState,result } )=>{
                    // console.log("==>",response);
                    if (!resultState) {
                        return Promise.reject({
                            message: "网络延迟，稍后重试!"
                        });
                    }
                    this.types = result;
                })
                .then(()=>{
                    let ps = [];
                    for (let i = 0; i < this.types.length; i++) {
                        let temp = this.$api.loadFilmsByParams({
                            typeId:this.types[i].typeId,
                            size:4
                        })
                        ps.push(temp);
                    }
                    return Promise.all(ps);
                })
                .then((datas)=>{
                    for (let i = 0; i < datas.length; i++) {
                        if(!datas[i].resultState){
                             return Promise.reject({
                                message: "网络延迟，稍后重试!"
                            });
                        }
                       this.$set(this.types[i],"list",datas[i].result);
                    }
                })
                .catch(this.$error)
        }
    },
    mounted() {
        this.postTypesData()
    }
};
</script>

<style lang="less" scoped>
// 首页样式
.home-box {
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    // overflow-y: auto;
    overflow: hidden;
}
.list-content {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 0.1rem;
    font-size: 0rem;
    &::after {
        content: "";
        width: 0.1rem;
        display: inline-block;
    }
}
</style>